<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

    <div id="app">
        <button v-on:click="getUser">获取用户信息</button>

    </div>


    <script>

        // 添加请求拦截器
        axios.interceptors.request.use(function(config){
            // 在发送请求之前做些什么
            // 添加token
            config.headers.token='xyx';
            console.log('1',config);
            return config;
        },function(error){
            // 对请求错误做些什么
            return Promise.reject(error);
        })

        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            return response.data;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });

        var app = new Vue({
            el:'#app',
            methods: {
                getUser:function(){
                    axios.get('./user.json',{
                        params:{id:1},
                        // headers:{token:'xyx'}
                    }).then( data => {
                        console.log(data);
                    }).catch(err => {
                        console.log(err);
                    })
                }
            },
        })

        
    </script>
    
</body>
</html>